import React, { Component, useState, useEffect } from 'react';
import { Platform, StyleSheet, Text, View, Image, TouchableOpacity, Dimensions } from 'react-native';
import { ScrollView, TextInput } from 'react-native-gesture-handler';
import styles from '../styles/style'

export default function Onboarding({ navigation }) {
    const [list, setList] = useState([
        {
            set: 1,
            intemsity: '80%',
            target: '4-6 reps',
            achived: '65 x 6',
            done: true
        },
        {
            set: 2,
            intemsity: '80%',
            target: '4-6 reps',
            achived: '65 x 6',
            done: true
        },
        {
            set: 3,
            intemsity: '80%',
            target: '4-6 reps',
            achived: '65 x 6',
            done: true
        }
    ])

    const addSet = () => {
        list.push({
            set: list.length + 1,
            intemsity: '80%',
            target: '4-6 reps',
            achived: '',
            done: false
        })
        setList(list)
    }

    return (
        <ScrollView style={styles.container}>
            <View style={styles.detail_group}>
                <View style={[styles.row_between, styles.row_item_center]}>
                    <Text style={[styles.text_666, styles.text_bold]}>1   <Text style={styles.text_333}>Bench Press</Text></Text>
                    <TouchableOpacity style={[styles.watch, styles.alternative]}>
                        <Text style={styles.text_white}>Alternatives</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.detail_group_space} />
                <Text style={styles.text_666}><Text style={styles.text_bold}>Coach's notes:</Text>Rest 1 minute between each set here.Don't work to failure</Text>
                <View style={styles.workout_table}>
                    <View style={styles.workout_table_row}>
                        <View style={[styles.workout_table_item, { width: '12%' }]}>
                            <Text style={[styles.text_999, styles.text_bold]}>Set</Text>
                        </View>
                        <View style={[styles.workout_table_item, { width: '20%' }]}>
                            <Text style={[styles.text_999, styles.text_bold]}>Intensity</Text>
                        </View>
                        <View style={[styles.workout_table_item, { width: '25%' }]}>
                            <Text style={[styles.text_999, styles.text_bold]}>Target</Text>
                        </View>
                        <View style={[styles.workout_table_item, { width: '30%' }]}>
                            <Text style={[styles.text_999, styles.text_bold]}>Achieved</Text>
                        </View>
                    </View>
                    {
                        list.map((item, index) => {
                            return <View style={styles.workout_table_row} key={index}>
                                <View style={[styles.workout_table_item, { width: '12%' }]}>
                                    <Text style={[styles.text_333, styles.text_bold]}>{item.set}</Text>
                                </View>
                                <View style={[styles.workout_table_item, { width: '20%' }]}>
                                    <Text style={[styles.text_333, styles.text_bold]}>{item.intemsity}</Text>
                                </View>
                                <View style={[styles.workout_table_item, { width: '25%' }]}>
                                    <Text style={[styles.text_333, styles.text_bold]}>{item.target}</Text>
                                </View>
                                <View style={[styles.workout_table_item, styles.workout_input_bg, { width: '30%' }]}>
                                    <Text style={[styles.text_333, styles.text_bold]}>{item.achived}</Text>
                                </View>
                                <View style={[styles.workout_table_item, { width: '13%' }]}>
                                    <Image style={styles.check_img} source={item.done ? require('../resource/check_circle.png') : require('../resource/check_disable.png')} />
                                </View>
                            </View>
                        })
                    }

                    <TouchableOpacity style={styles.add_set} onPress={() => addSet()}>
                        <Image style={styles.check_img} source={require('../resource/add-fill.png')} />
                        <Text style={styles.text_999}>Add Set</Text>
                    </TouchableOpacity>

                    <TextInput style={styles.workout_note} placeholder="Add exercise notes" />
                </View>
            </View>
        </ScrollView>
    );
}